<template>
	<view class="flex-col page">
		<MyHeader title="登录/注册" background="#ffffff"></MyHeader>
		<view class="flex-row items-start self-stretch">
			<view class="flex-col flex-1">
				<view class="mt-36 flex-col justify-center items-center">
					<image class="image_7"
						src="https://ide.code.fun/api/image?token=677635d7defdb10011116f2f&name=548bdc695977da9b32cb98f2a879a9c0.png" />
					<text class="font_2 text_3 mt-15">信息服务平台</text>
				</view>
			</view>
		</view>
		<text class="self-center text_4">授权绑定手机号 为您提供更好的服务</text>
		<view class="flex-col justify-start items-center self-center text-wrapper" @click="login">
			<text class="font_2 text_5">一键登录</text>
		</view>
		<view class="flex-row items-center self-start group_3">
			<!-- <view class="shrink-0 section_5"></view> -->
			<view v-if="!isSelect" class="noneIcon" @click="confirmBtn(true)">

			</view>
			<u-icon v-if="isSelect" name="checkmark-circle" @click="confirmBtn(false)"></u-icon>
			<text class="shrink-0 font text_6">我已阅读并同意</text>
			<view class="flex-col justify-start items-start shrink-0 relative group_4">
				<text class="font_3">服务协议</text>
				<text class="font pos_4">和</text>
			</view>
			<text class="shrink-0 font_3 text_7">隐私政策</text>

		</view>
		<!-- 	<view>
			{{wexinSuccess.code}}
			{{wexinSuccess.errMsg}}

		</view>
		<view>
			{{loginSuccess}}
		</view> -->
	</view>
</template>

<script setup>
	import {
		useUserStore
	} from '@/store/useUserStore';
	import {
		tabbarList
	} from '@/utils/constant';
	import request from '@/utils/request';
	import {
		reactive,
		ref
	} from 'vue';
	const props = defineProps({
		from: {
			type: String,
			default: '/pages/wode/wode'
		}
	})
	import {
		loginApi
	} from '@/apis/login.js'
	// 登录事件 
	const userStore = useUserStore()
	const wexinSuccess = ref({})
	const loginSuccess = ref({})
	const login = () => {
	 
		if (!isSelect.value) {
			uni.showToast({
				title: '请先勾选同意按钮',
				icon: 'none'
			})
			return
		}
		wx.login({
			success: async function(res1) {
				// console.log(res1);
				// wexinSuccess.value = res1
				if (res1.code) {
					const code = res1.code;
					// loginSuccess.value = '1'
					const res2 = await loginApi({
						code
					})
					// loginSuccess.value = res2.data
					// 获取用户信息设置到本地
					// 在本地存储用户唯一标识
					uni.setStorageSync('userId', res2.data.id)
					userStore.setUserInfo()

					setTimeout(() => {
						if (tabbarList.includes(props.from)) {
							uni.switchTab({
								url: props.from
							})
						} else {
							uni.navigateBack({
								url: props.from
							})
						}
					}, 500)
					// request({
					// 	url: '/UserService/userInfo/login', // 替换为你自己的后台接口
					// 	method: 'POST',
					// 	data: {
					// 		code: code
					// 	},
					// }).then(res => {
					// 	uni.showToast({
					// 		title: res.code,
					// 		icon: 'none'
					// 	})
					// 	loginSuccess.value = res.data
					// 	// 获取用户信息设置到本地
					// 	// 在本地存储用户唯一标识
					// 	uni.setStorageSync('userId', res.data.id)
					// 	userStore.setUserInfo()

					// setTimeout(() => {
					//   if (tabbarList.includes(props.from)) {
					//     uni.switchTab({
					//       url: props.from
					//     })
					//   } else {
					//     uni.navigateBack({
					//       url: props.from
					//     })
					//   }
					// }, 500)
					// })

				} else {
					console.log("登录失败！" + res.errMsg);
				}
			}
		});

	}
	const isSelect = ref(false)
	const confirmBtn = (boolean) => {
		isSelect.value = boolean
	}
</script>

<style scoped>
	.noneIcon {
		width: 32rpx;
		height: 32rpx;
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: normal;
		border-radius: 50%;
		border: 1px solid #606266;
		color: #606266;
		box-sizing: border-box;
	}

	.mt-15 {
		margin-top: 30rpx;
	}

	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.mt-21 {
		margin-top: 42rpx;
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.section {
		filter: blur(240rpx);
		background-image: url('https://ide.code.fun/api/image?token=677635d7defdb10011116f2f&name=514b196716ac444d450e3dcfe2780473.png');
		background-size: 100% 100%;
		width: 336rpx;
		height: 224rpx;
	}

	.text_2 {
		color: #333333;
		font-size: 36rpx;
		font-family: SourceHanSansCN;
		line-height: 37.04rpx;
		opacity: 0.9;
	}

	.pos_3 {
		position: absolute;
		right: 20rpx;
		bottom: 66.96rpx;
	}

	.image_4 {
		width: 18rpx;
		height: 34rpx;
	}

	.pos_2 {
		position: absolute;
		left: 34rpx;
		bottom: 74rpx;
	}

	.font {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 34rpx;
		color: #a6a6a6;
	}

	.text {
		color: #333333;
		font-size: 30rpx;
		line-height: 22.76rpx;
	}

	.pos {
		position: absolute;
		left: 70rpx;
		top: 42rpx;
	}

	.image_7 {
		border-radius: 50%;
		width: 200rpx;
		height: 200rpx;
	}

	.font_2 {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 29.86rpx;
	}

	.text_3 {
		color: #333333;
	}

	.group {
		margin-top: 34rpx;
		width: 212rpx;
	}

	.group_2 {
		padding-left: 50rpx;
		padding-right: 30rpx;
	}

	.image {
		width: 34rpx;
		height: 22rpx;
	}

	.image_2 {
		width: 30rpx;
		height: 22rpx;
	}

	.image_3 {
		width: 48rpx;
		height: 22.66rpx;
	}

	.section_2 {
		padding: 12rpx 24rpx;
		background-color: #ffffff99;
		border-radius: 50rpx;
		border-left: solid 1rpx #97979733;
		border-right: solid 1rpx #97979733;
		border-top: solid 1rpx #97979733;
		border-bottom: solid 1rpx #97979733;
	}

	.image-wrapper {
		width: 38rpx;
	}

	.image_6 {
		width: 38rpx;
		height: 14rpx;
	}

	.section_3 {
		background-color: #33333333;
		width: 1rpx;
		height: 37rpx;
	}

	.image_5 {
		width: 34rpx;
		height: 34rpx;
	}

	.section_4 {
		background-color: #ffcd9c;
		filter: blur(244rpx);
		border-radius: 50% 0 0 50%;
		height: 370rpx;
	}

	.text_4 {
		margin-top: 128rpx;
		color: #a6a6a6;
		font-size: 24rpx;
		font-family: SourceHanSansCN;
		line-height: 28rpx;
		width: 400rpx;
	}

	.text-wrapper {
		margin-top: 60rpx;
		padding: 28rpx 0;
		background-image: linear-gradient(90deg, #4c8eef 0%, #91c2fa 99.4%);
		border-radius: 98rpx;
		width: 578rpx;
	}

	.text_5 {
		color: #ffffff;
		line-height: 30.04rpx;
	}

	.group_3 {
		margin-left: 118rpx;
		margin-top: 60rpx;
	}

	.section_5 {
		background-color: #ffffff;
		border-radius: 50%;
		width: 30rpx;
		height: 30rpx;
		border-left: solid 1rpx #8f959e;
		border-right: solid 1rpx #8f959e;
		border-top: solid 1rpx #8f959e;
		border-bottom: solid 1rpx #8f959e;
	}

	.text_6 {
		margin-left: 12rpx;
	}

	.group_4 {
		width: 145rpx;
	}

	.font_3 {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 34rpx;
		color: #365d99;
	}

	.pos_4 {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.text_7 {
		width: 130rpx;
	}
</style>